<template>
    <div class="animation-attr">
        <div class="animation-top">
            <div class="animation-btn" @click="previewAnimate">预览动画</div>
            <div class="animate-result">
                <div class="animate-selected" v-for="(item, index) in currentElementList[0].animate" :key="index">
                    <span>{{ item.label }}</span>
                    <i class="el-icon-delete" @click="removeAnimate(item)"></i>
                </div>
            </div>
        </div>
        <div class="animation-bottom">
            <el-tabs v-model="animationActiveName">
                <el-tab-pane v-for="item in animation" :key="item.label" :label="item.label" :name="item.label">
                    <el-scrollbar class="animate-container">
                        <div class="animate-par animate" v-for="(animate, index) in item.children" :key="index" @mouseover="hoverPreviewAnimate = animate.value" @dblclick="addAnimate(animate)" title="双击添加动画">
                            <div class="animate-press" :class="[hoverPreviewAnimate === animate.value && animate.value + ' animated']">
                                {{ animate.label }}
                            </div>
                        </div>
                    </el-scrollbar>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>

<script>
import bus from '@/js/event/bus.js';
import store from '@/js/store/state.js';
import message from '@/js/util/message.js';

export default {
    name: 'AnimationAttr',
    data() {
        return {
            animation: [
                {
                    label: '进入',
                    children: [
                        { label: '渐显', value: 'fadeIn' },
                        { label: '向右进入', value: 'fadeInRight' },
                        { label: '向左进入', value: 'fadeInLeft' },
                        { label: '向上进入', value: 'fadeInUp' },
                        { label: '向下进入', value: 'fadeInDown' },
                        { label: '向右长距进入', value: 'fadeInLeftBig' },
                        { label: '向左长距进入', value: 'fadeInRightBig' },
                        { label: '向上长距进入', value: 'fadeInUpBig' },
                        { label: '向下长距进入', value: 'fadeInDownBig' },
                        { label: '旋转进入', value: 'rotateIn' },
                        { label: '左顺时针旋转', value: 'rotateInDownLeft' },
                        { label: '右逆时针旋转', value: 'rotateInDownRight' },
                        { label: '左逆时针旋转', value: 'rotateInUpLeft' },
                        { label: '右逆时针旋转', value: 'rotateInUpRight' },
                        { label: '弹入', value: 'bounceIn' },
                        { label: '向右弹入', value: 'bounceInLeft' },
                        { label: '向左弹入', value: 'bounceInRight' },
                        { label: '向上弹入', value: 'bounceInUp' },
                        { label: '向下弹入', value: 'bounceInDown' },
                        { label: 'Y轴旋转', value: 'flip' },
                        { label: '中心X轴旋转', value: 'flipInX' },
                        { label: '中心Y轴旋转', value: 'flipInY' },
                        { label: '左长半径旋转', value: 'rollIn' },
                        { label: '由小变大进入', value: 'zoomIn' },
                        { label: '左变大进入', value: 'zoomInLeft' },
                        { label: '右变大进入', value: 'zoomInRight' },
                        { label: '向上变大进入', value: 'zoomInUp' },
                        { label: '向下变大进入', value: 'zoomInDown' },
                        { label: '向右滑动展开', value: 'slideInLeft' },
                        { label: '向左滑动展开', value: 'slideInRight' },
                        { label: '向上滑动展开', value: 'slideInUp' },
                        { label: '向下滑动展开', value: 'slideInDown' }
                    ]
                },
                {
                    label: '强调',
                    children: [
                        { label: '弹跳', value: 'bounce' },
                        { label: '闪烁', value: 'flash' },
                        { label: '放大缩小', value: 'pulse' },
                        { label: '放大缩小弹簧', value: 'rubberBand' },
                        { label: '左右晃动', value: 'headShake' },
                        { label: '左右扇形摇摆', value: 'swing' },
                        { label: '放大晃动缩小', value: 'tada' },
                        { label: '扇形摇摆', value: 'wobble' },
                        { label: '左右上下晃动', value: 'jello' },
                        { label: 'Y轴旋转', value: 'flip' }
                    ]
                },
                {
                    label: '退出',
                    children: [
                        { label: '渐隐', value: 'fadeOut' },
                        { label: '向左退出', value: 'fadeOutLeft' },
                        { label: '向右退出', value: 'fadeOutRight' },
                        { label: '向上退出', value: 'fadeOutUp' },
                        { label: '向下退出', value: 'fadeOutDown' },
                        { label: '向左长距退出', value: 'fadeOutLeftBig' },
                        { label: '向右长距退出', value: 'fadeOutRightBig' },
                        { label: '向上长距退出', value: 'fadeOutUpBig' },
                        { label: '向下长距退出', value: 'fadeOutDownBig' },
                        { label: '旋转退出', value: 'rotateOut' },
                        { label: '左顺时针旋转', value: 'rotateOutDownLeft' },
                        { label: '右逆时针旋转', value: 'rotateOutDownRight' },
                        { label: '左逆时针旋转', value: 'rotateOutUpLeft' },
                        { label: '右逆时针旋转', value: 'rotateOutUpRight' },
                        { label: '弹出', value: 'bounceOut' },
                        { label: '向左弹出', value: 'bounceOutLeft' },
                        { label: '向右弹出', value: 'bounceOutRight' },
                        { label: '向上弹出', value: 'bounceOutUp' },
                        { label: '向下弹出', value: 'bounceOutDown' },
                        { label: '中心X轴旋转', value: 'flipOutX' },
                        { label: '中心Y轴旋转', value: 'flipOutY' },
                        { label: '左长半径旋转', value: 'rollOut' },
                        { label: '由小变大退出', value: 'zoomOut' },
                        { label: '左变大退出', value: 'zoomOutLeft' },
                        { label: '右变大退出', value: 'zoomOutRight' },
                        { label: '向上变大退出', value: 'zoomOutUp' },
                        { label: '向下变大退出', value: 'zoomOutDown' },
                        { label: '向左滑动收起', value: 'slideOutLeft' },
                        { label: '向右滑动收起', value: 'slideOutRight' },
                        { label: '向上滑动收起', value: 'slideOutUp' },
                        { label: '向下滑动收起', value: 'slideOutDown' }
                    ]
                }
            ],
            animationActiveName: '进入',
            hoverPreviewAnimate: '',
            currentElementList: store.getCurrentElementList()
        }
    },
    methods: {
        previewAnimate() {
            bus['animation' + this.currentElementList[0].id]();
        },
        addAnimate(animate) {
            store.addAnimate(this.currentElementList[0], animate);
        },
        removeAnimate(item) {
            let _this = this;
            message.confirm(
                '是否删除动画',
                '',
                function() {
                    message.message('删除成功！', 'success');
                    store.removeAnimate(_this.currentElementList[0], item);    
                },
                function() {
                    message.message('已取消删除！', 'info');
                }
            );
        }
    }
}
</script>

<style lang="scss" scoped>
.animation-attr {
    position: relative;
    max-height: $attrMaxHeight;
    overflow: auto;
}
.animation-top {
    .animation-btn {
        height: 30px;
        line-height: 30px;
        background: #FFFFFF0F;
        color: $FontWhite;
        text-align: center;
        border-radius: 5px;
        cursor: pointer;
        &:hover {
            background: #FFFFFF33;
        }
    }
    .animate-result {
        margin-top: 10px;
    }
    .animate-selected {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 30px;
        background: #303030;
        border-radius: 4px;
        margin-bottom: 5px;
        &:last-child {
            margin-bottom: 0px;
        }
        &:hover {
            background: #FFFFFF33;
        }
        > span {
            color: $FontWhite;
            font-size: $Font12;
            padding-left: 10px;
        }
        > i {
            color: $FontWhite;
            cursor: pointer;
            padding-right: 10px;
            &:hover {
                color: #3664ec;
            }
        }
    }
}
.animation-bottom {
    margin-top: 10px;
    ::v-deep .el-scrollbar__view {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        padding-left: 0;
        margin-top: 10px;
    }
    ::v-deep .el-tabs__nav-scroll {
        padding-left: 0;
    }
    .animate-par {
        width: calc(100% / 2 - 5px);
        margin-bottom: 5px;
    }
    .animate-press {
        height: 30px;
        line-height: 30px;
        background: #303030;
        color: $FontWhite;
        font-size: $Font12;
        border-radius: 4px;
        cursor: pointer;
        user-select: none;
        text-align: center;
        &:hover {
            background: #3664ec;
        }
    }
}
</style>